<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="../Ajs/vue.min.js"></script>

</head>
<body>

<div id="app">
    <goods-cart></goods-cart>
</div>

<script>

    /*---------------------子组件对象-------------------*/
    var myHeader ={
        props:["title"],
        template:"<div id=\"header\">{{title}}的商品</div>"
    };
    var myGoods ={
        props:["goodsList"],
        template:`<div id="goods">
            <ul>
                <li v-for="(item,index) in goodsList" :key="index">
                    <span class="good">{{item.goodName}}</span>
                    <span class="price">{{item.price}}元</span>
                    <button @click="subNum(index)">-</button>
                    <input type="text" :value="item.num" @change="changeNum(index,$event)">
                    <button @click="addNum(index)">+</button>
                    <a href="" @click.prevent="del(index)">删除</a>
                </li>
            </ul>
        </div>`,
        methods:{
            changeNum:function (index,event) {
                var newNum = event.target.value;

                this.$emit("f_changeNum",{
                    ind:index,
                    type:"change",
                    num:newNum
                })
            },
            subNum:function(ind){
                this.$emit("f_changeNum",{
                    ind:ind,
                    type:"sub"
                })
            },
            addNum:function(ind){
                this.$emit("f_changeNum",{
                    ind:ind,
                    type:"add"
                })
            },
            del(index){
                this.$emit("f_delGood",index);
            }
        }
    };
    var myFooter ={
        props:["goodsList"],
        template:`<div id="footer">商品总金额 <span>{{zPrice}}元</span></div>`,
        computed:{
            zPrice:function(){
                var $this = this;
                var zP = 0;
                this.goodsList.forEach(function(val,ind){
                    zP += parseInt(val.price)*val.num;
                });
                return zP;
            }
        }
    };

    /*------------------父组件-------------------*/
    Vue.component("goods-cart",{
        data(){
            return {
                title:"jankin",
                goodsList:[
                    {goodName:"路飞马克杯",price:"100",num:0},
                    {goodName:"耳机",price:"15",num:0}
                ]
            }
        },
        methods:{
            "changeNum":function(data){
                if(data.type== "change"){
                    this.goodsList.some(function(val,ind){
                        if(data.ind == ind){
                            val.num = data.num;
                        }
                    })
                }else if(data.type== "sub"){
                    this.goodsList.some(function(val,ind){
                        if(data.ind == ind){
                            val.num -= 1;
                        }
                    })
                }else if(data.type=="add"){
                    this.goodsList.some(function(val,ind){
                        if(data.ind == ind){
                            val.num += 1;
                        }
                    })
                }
            },
            "delGood":function(ind){
                this.goodsList.splice(ind,1);
            }
        },
        template:`<div>
            <my-header :title="title"></my-header>
            <my-goods :goodsList="goodsList" @f_changeNum="changeNum" @f_delGood="delGood"></my-goods>
            <my-footer :goodsList="goodsList"></my-footer>
        </div>`,
        components:{
            "my-header":myHeader,
            "my-goods":myGoods,
            "my-footer":myFooter
        }
    });

    /*---------------------- vue实例 -------------------------------*/
    var vm = new Vue({
        el:"#app",
        data:{}
    })
</script>

</body>
</html>
